<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <meta name="description" content="胃肠道症状评定量表(GSRS)评估报告，提供专业的评估结果分析，包括分类得分、总分、结果解释和改善建议，帮助用户了解自己的胃肠道健康状况。">
        <meta name="keywords" content="胃肠道症状评定量表, GSRS量表报告, 胃肠道健康评估报告, 消化系统症状报告, 反流症状, 腹泻, 便秘, 消化不良, 恶心呕吐, 胃肠道健康建议">
        <meta name="custom-image" content="https://totemlife.cn/apps/public/gsrs-scale-cover.jpg">
        <title>GSRS量表评估报告</title>
        <script src="/apps/js/baidu-tongji-mtx.js"></script>
        <link href="/apps/css/bootstrap.min.css" rel="stylesheet">
        <link href="/apps/css/fontawesome-free-6.4.0-web/css/all.css" rel="stylesheet">
        <style>
            /* 自定义颜色类 */
            .bg-teal {
                background-color: #20c997;
            }

            /* 页面样式 */
            body {
                background-color: #f8f9fa;
                padding-bottom: 60px;
            }

            footer {
                position: fixed;
                bottom: 0;
                width: 100%;
                background-color: rgba(15, 76, 129, 0.8);
                color: white;
                padding: 10px 15px;
                display: flex;
                justify-content: center;
                align-items: center;
                z-index: 1000;
            }

            /* 移动端优化 */
            @media (max-width: 576px) {
                /* 标题优化 */
                h1 {
                    font-size: 1.75rem;
                }

                h2 {
                    font-size: 1.5rem;
                }

                h5 {
                    font-size: 1.1rem;
                }

                /* 表格响应式优化 */
                .table-responsive {
                    font-size: 0.875rem;
                }

                /* 结果显示优化 */
                .display-5 {
                    font-size: 2rem;
                }

                /* 按钮优化 */
                .action-btns {
                    flex-direction: column;
                    width: 100%;
                }

                .action-btns .btn {
                    margin-bottom: 0.5rem;
                    width: 100%;
                }

                /* 图表容器优化 */
                .chart-container {
                    height: 250px !important;
                    margin-top: 1rem;
                }

                /* 手风琴组件优化 */
                .accordion-button {
                    padding: 0.75rem;
                    font-size: 0.95rem;
                }

                /* 分类得分表格优化 */
                .category-table th,
                .category-table td {
                    padding: 0.5rem;
                }
            }

            /* 打印样式 */
            @media print {
                body {
                    background-color: #fff !important;
                }

                .container {
                    width: 100%;
                    max-width: 100%;
                    padding: 0;
                    margin: 0;
                }

                .card {
                    border: none !important;
                    box-shadow: none !important;
                }

                .card-body {
                    padding: 0 !important;
                }

                h1, .btn, .d-flex {
                    display: none !important;
                }

                #reportCard {
                    display: block !important;
                }

                footer {
                    display: none !important;
                }
            }
        </style>
    </head>
    <body>
{{!-- GSRS胃肠道症状评定量表评估报告页面 --}}
<div class="container mt-4 mb-5">
    <div class="row">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h1>GSRS量表评估报告</h1>
                <div class="action-btns d-flex">
                    <button id="printReportBtn" class="btn btn-primary me-2">
                        <i class="fas fa-print"></i> 打印报告
                    </button>
                    <a href="/apps/scales/scales-dashboard" class="btn btn-outline-secondary me-2">
                        <i class="fas fa-th-large"></i> 量表工具
                    </a>
                    <a href="/apps/scales/gsrs-scale/result/{{assessment.id}}" class="btn btn-outline-secondary">
                        <i class="fas fa-arrow-left"></i> 返回
                    </a>
                </div>
            </div>

            <div class="card shadow-sm mb-4" id="reportCard">
                <div class="card-body">
                    <div class="text-center mb-4 border-bottom pb-3">
                        <h2 class="mb-1">胃肠道症状评定量表(GSRS)评估报告</h2>
                        <p class="text-muted">报告生成时间: {{formatDate assessment.assessment_date "YYYY-MM-DD HH:mm:ss"}}</p>
                    </div>

                    <div class="row mb-4">
                        <div class="col-md-6">
                            <h5>基本信息</h5>
                            <table class="table table-bordered">
                                <tr>
                                    <th style="width: 120px;" class="bg-light">评估人</th>
                                    <td>{{userInfo.real_name}}</td>
                                </tr>
                                <tr>
                                    <th class="bg-light">评估日期</th>
                                    <td>{{formatDate assessment.assessment_date "YYYY-MM-DD HH:mm:ss"}}</td>
                                </tr>
                            </table>
                        </div>
                        <div class="col-md-6">
                            <h5>评估结果</h5>
                            <div class="row text-center py-3 border rounded">
                                <div class="col-6">
                                    <div class="fs-5 mb-1">总分</div>
                                    <div class="display-5 fw-bold mb-2">{{assessment.total_score}}</div>
                                </div>
                                <div class="col-6">
                                    <div class="fs-5 mb-1">平均分</div>
                                    <div class="display-5 fw-bold mb-2">{{assessment.avg_score}}</div>
                                </div>
                                <div class="col-12 mt-2">
                                    <div class="fs-4 mb-2">
                                        <span class="badge {{#if (eq assessment.result_level '轻微')}}bg-success{{else if (eq assessment.result_level '中度')}}bg-warning{{else if (eq assessment.result_level '较重')}}bg-orange{{else}}bg-danger{{/if}} px-3 py-2">
                                            {{assessment.result_level}}
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="mb-4">
                        <h5>症状分类得分</h5>
                        <div class="row">
                            <div class="col-md-7">
                                <div class="table-responsive">
                                    <table class="table table-bordered category-table">
                                        <thead class="bg-light">
                                            <tr>
                                                <th>症状类别</th>
                                                <th class="text-center">平均分</th>
                                                <th class="text-center">严重程度</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {{#each categories}}
                                            <tr>
                                                <td>{{name}}</td>
                                                <td class="text-center">{{formatNumber (lookup ../categoryScores id) 2}}</td>
                                                <td class="text-center">
                                                    <span class="badge {{#if (lte (lookup ../categoryScores id) 2)}}bg-success{{else if (lte (lookup ../categoryScores id) 3)}}bg-warning{{else if (lte (lookup ../categoryScores id) 4)}}bg-orange{{else}}bg-danger{{/if}}">
                                                        {{#if (lte (lookup ../categoryScores id) 2)}}
                                                            轻微
                                                        {{else if (lte (lookup ../categoryScores id) 3)}}
                                                            中度
                                                        {{else if (lte (lookup ../categoryScores id) 4)}}
                                                            较重
                                                        {{else}}
                                                            严重
                                                        {{/if}}
                                                    </span>
                                                </td>
                                            </tr>
                                            {{/each}}
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="col-md-5">
                                <div class="border rounded p-2 h-100 chart-container">
                                    <canvas id="categoryChart"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="mb-4">
                        <h5>结果解释</h5>
                        <div class="p-3 border rounded">
                            <p>{{assessment.result_description}}</p>

                            <div class="mt-3">
                                <h6>GSRS量表分数解释：</h6>
                                <ul>
                                    <li><strong>平均分 ≤ 2：</strong>症状轻微，属于正常范围内的波动。</li>
                                    <li><strong>平均分 2.1-3：</strong>症状中度，建议关注饮食习惯，必要时咨询医生。</li>
                                    <li><strong>平均分 3.1-4：</strong>症状较重，建议尽快就医，进行专业检查和治疗。</li>
                                    <li><strong>平均分 > 4：</strong>症状严重，请立即就医，接受专业医疗评估和治疗。</li>
                                </ul>
                                <p class="mt-2">评分标准：0分(完全没有)、1分(稍微有)、2分(少量有)、3分(中等程度)、4分(较明显不适)、5分(比较严重)、6分(特别严重)</p>
                            </div>
                        </div>
                    </div>

                    <div class="mb-4">
                        <h5>改善建议</h5>
                        <div class="p-3 border rounded">
                            <p>{{suggestions}}</p>

                            <div class="mt-3">
                                <h6>针对具体症状的建议：</h6>
                                <div class="accordion" id="adviceAccordion">
                                    {{#each categories}}
                                    <div class="accordion-item">
                                        <h2 class="accordion-header" id="adviceHeading{{id}}">
                                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#adviceCollapse{{id}}" aria-expanded="false" aria-controls="adviceCollapse{{id}}">
                                                {{name}} (平均分: {{formatNumber (lookup ../categoryScores id) 2}})
                                            </button>
                                        </h2>
                                        <div id="adviceCollapse{{id}}" class="accordion-collapse collapse" aria-labelledby="adviceHeading{{id}}" data-bs-parent="#adviceAccordion">
                                            <div class="accordion-body">
                                                {{#if (lookup ../categoryAdvice id)}}
                                                    {{lookup ../categoryAdvice id}}
                                                {{else}}
                                                    暂无针对该症状的具体建议。
                                                {{/if}}
                                            </div>
                                        </div>
                                    </div>
                                    {{/each}}
                                </div>
                            </div>

                            <div class="alert alert-info mt-3 mb-0">
                                <i class="fas fa-info-circle me-2"></i>
                                <strong>提示：</strong>保持健康的生活方式对胃肠道健康至关重要。如果您的症状持续存在或加重，请咨询专业医师获取个性化的诊疗方案。
                            </div>
                        </div>
                    </div>

                    <div class="text-center mt-5 pt-3 border-top">
                        <p class="text-muted mb-0">本报告仅供参考，不能替代专业医疗机构的诊断</p>
                        <p class="text-muted mb-0">© {{currentYear}} 胃肠道症状评定量表(GSRS)评估系统</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Footer -->
<footer>
    <div class="text-center">
        <a id="tmall-app-home-link" href="weixin://dl/business/?appid=wx1b441d1a37b278e1&path=pages/index/index&env_version=release" class="text-decoration-none">
            <span id="tmall-app-home-title" style="color: white; font-size: 16px; margin-left: 5px;">
                <i class="fa fa-house"></i> 广州图腾生命医学研究有限公司
            <span>
        </a>
        &copy; {{currentYear}}
    </div>
</footer>

<!-- 将所有JS文件移到这里，并添加defer属性 -->
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js" defer></script>
<script src="/apps/js/bootstrap.bundle.min.js" defer></script>
<script src="/apps/js/wx-client-dom.js" defer></script>
<script src="/apps/js/chart.js" defer></script>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 打印报告
        document.getElementById('printReportBtn').addEventListener('click', function() {
            window.print();
        });

        // 绘制分类得分图表
        const ctx = document.getElementById('categoryChart').getContext('2d');

        // 准备数据
        const categories = [
            {{#each categories}}
                "{{name}}",
            {{/each}}
        ];

        const scores = [
            {{#each categories}}
                {{formatNumber (lookup ../categoryScores id) 2}},
            {{/each}}
        ];

        // 生成颜色
        const backgroundColors = [
            'rgba(255, 99, 132, 0.7)',
            'rgba(54, 162, 235, 0.7)',
            'rgba(255, 206, 86, 0.7)',
            'rgba(75, 192, 192, 0.7)',
            'rgba(153, 102, 255, 0.7)'
        ];

        // 创建图表
        new Chart(ctx, {
            type: 'radar',
            data: {
                labels: categories,
                datasets: [{
                    label: '症状得分',
                    data: scores,
                    backgroundColor: 'rgba(54, 162, 235, 0.2)',
                    borderColor: 'rgba(54, 162, 235, 1)',
                    borderWidth: 2,
                    pointBackgroundColor: 'rgba(54, 162, 235, 1)',
                    pointBorderColor: '#fff',
                    pointHoverBackgroundColor: '#fff',
                    pointHoverBorderColor: 'rgba(54, 162, 235, 1)'
                }]
            },
            options: {
                scales: {
                    r: {
                        angleLines: {
                            display: true
                        },
                        suggestedMin: 1,
                        suggestedMax: 5
                    }
                },
                plugins: {
                    legend: {
                        position: 'bottom'
                    },
                    title: {
                        display: true,
                        text: '症状分布图',
                        font: {
                            size: 14
                        }
                    }
                }
            }
        });
    });
</script>

</body>
</html> 
